<template>
  <div class="table-container">
    <p class='header'>
    <div class="header-icon"></div><span class="page-title">{{ props.message_type }}</span></p>
    <el-table :data="tableData" style="width: 100%;border-radius:8px 8px 0 0;">
      <el-table-column v-for="column in props.columns" :key="column.prop" :label="column.label"
        :prop="column.prop"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type='primary' plain @click="toSubmit(scope.row.message_id)">编辑</el-button>
          <el-button type="danger" @click="toDelete(scope.row.message_id)" plain>删除</el-button>
        </template>
      </el-table-column>
    </el-table>


    <div class="foot">
      <el-button type='primary' @click="addmmessage">添加</el-button>
      <el-pagination background layout="prev, pager, next,sizes" :total="total" :current-page="currentPage"
        :page-size="pageSize" @update:current-page="handleCurrentPageChange" @update:page-size="handlePageSizeChange"
        :page-sizes="[10, 20, 50,100]" />
    </div>

  </div>
</template>

<script lang="ts" setup>
import { PropType, onMounted, ref, } from 'vue';
import { ElTable, ElTableColumn, ElPagination } from 'element-plus';
import { getMessageList, addMessage, deleteMessage } from '../../api/message'
import { string } from 'vue-types';
import { useRouter } from 'vue-router';
import { message } from '@/utils/message';
const router=useRouter()
const props = defineProps( {
  columns: {
    type: Array as PropType<{ label: string; prop: string }[]>,
    required: true,
  },
  message_type: string
})
onMounted(() => {
  getList()
})

const tableData = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(20);

const getList = async () => {
  let res = await getMessageList({ page: currentPage.value, count: pageSize.value, message_type: props.message_type });
  console.log('消息结果', res);
  tableData.value = res.data.data;
  total.value=res.data.count
}
const handleCurrentPageChange = async newPage => {
  currentPage.value = newPage;
  getList()

};
const handlePageSizeChange = async newSize => {
  pageSize.value = newSize;
  getList()

};
const toSubmit = (data) => {
  router.push(`/managemessage/edit?message_id=${data}`)

};
const toDelete = async(data) => {
  let res = await deleteMessage({ message_id: data });
  if (res.data.code == 200) {
    message('删除成功！', { type: 'success' });
    getList()

  }
}
const addmmessage=()=>{
  // router.push(`/managemessage/edit`);
  addMessage({ message_type: props.message_type }).then((res) => {
    // console.log('新建', res.data.data.message_id);
    router.push(`/managemessage/edit?message_id=${res.data.data.message_id}`);
    
    
  })
}

</script>

<style lang='scss' scoped>
.foot{
  display: flex;
  background-color: white;
  align-items: center;
  .el-button{
    margin: 10px;
  }
}
.header {
  font-size: 18px;
  font-weight: bold;
  display: flex;
  align-items: center;

  .header-icon {
    height: 18px;
    width: 5px;
    background-color: #409eff;
    margin-right: 5px
  }
}
</style>